<template>
  <el-card>
    <!-- 玩家列表 -->
    <div class="panel-area">
      <ul class="participants">
        <li v-for="(item, index) in nicknames" :key="index">
          <span>{{ item }}{{ item === nickname ? '（我）' : '' }}</span>
          <el-tag v-if="item === holder" size="mini">主持</el-tag>
        </li>
      </ul>
    </div>

    <!-- 按钮工具栏 -->
    <div class="panel-area button-area">
      <el-button
        v-if="!isGameStarted"
        type="primary"
        size="small"
        icon="el-icon-edit"
        @click="startGameHandler"
      >主持游戏</el-button>

      <el-button
        v-if="isGameStarted && nickname === holder"
        type="warning"
        size="small"
        icon="el-icon-delete"
        @click="stopGameHandler"
      >终止游戏</el-button>

      <el-button
        v-if="isGameStarted && nickname !== holder"
        type="success"
        size="small"
        icon="el-icon-magic-stick"
        @click="guessHandler"
      >猜答案</el-button>

      <el-button
        type="danger"
        size="small"
        icon="el-icon-switch-button"
        @click="exitGameHandler"
      >退出游戏</el-button>
    </div>

    <!-- 弹出框：主持人设置答案 -->
    <el-dialog
      title="请设置答案"
      :visible.sync="resultDialogVisible"
      width="30%"
    >
      <el-input v-model="expectImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="resultDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDialogHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框：答题人设置答案 -->
    <el-dialog
      title="请填写答案"
      :visible.sync="answerDialogVisible"
      width="30%"
    >
      <el-input v-model="inputImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="answerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveAnswerDialogHandler"
        >确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      resultDialogVisible: false,
      expectImageName: '',
      answerDialogVisible: false,
      inputImageName: ''
    }
  },
  computed: {
    ...mapState(['nickname', 'nicknames', 'holder']),
    ...mapGetters(['isGameStarted'])
  },
  methods: {
    saveDialogHandler() {
      if (!this.expectImageName) return this.$message.error('答案设置不能为空')
      this.$store.dispatch('sendStartGame', this.expectImageName)
      this.resultDialogVisible = false
    },

    saveAnswerDialogHandler() {
      if (!this.inputImageName) return this.$message.error('答案不能为空')
      this.$store.dispatch('sendAnswer', this.inputImageName)
      this.answerDialogVisible = false
    },
    startGameHandler() {
      this.resultDialogVisible = true
      this.expectImageName = ''
    },
    stopGameHandler() {
      this.$confirm('确定要停止游戏吗？', '提示').then(() => {
        this.$store.dispatch('sendStopGame')
      }).catch(() => {})
    },
    guessHandler() {
      this.answerDialogVisible = true
      this.inputImageName = ''
    },
    exitGameHandler() {
      this.$confirm('确定要退出游戏吗？', '提示').then(() => {
        this.$store.dispatch('sendUserExit')
        this.$router.replace('/login')
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-area {
  margin: 10px 0;
}
</style>
